<template>
  <div class="container">
    <div class="header">
      <a-typography-title
        :style="{ marginRight: 10, fontSize: '18px' }"
        :heading="5"
      >
        捐款列表
      </a-typography-title>
      <a-button type="primary" @click="visible = true">捐钱</a-button>
    </div>

    <a-table :columns="columns" :data="data" class="table">
      <template #moneyTime="{ record }">
        <span>{{
          moment(record.moneyTime).format("YYYY-MM-DD HH:mm")
        }}</span>
      </template>
    </a-table>
  </div>

  <div class="container">
    <div class="header">
      <a-typography-title
        :style="{ marginRight: 10, fontSize: '18px' }"
        :heading="5"
      >
        捐款物资列表
      </a-typography-title>
      <a-button type="primary" @click="materialVisible = true">捐物资</a-button>
    </div>
    <a-table :columns="materialColumns" :data="materialData" class="table">
      <template #materialTime="{ record }">
        <span>{{
          moment(record.materialTime).format("YYYY-MM-DD HH:mm")
        }}</span>
      </template>
    </a-table>
  </div>

  <a-modal v-model:visible="visible" @cancel="handleCancel" @ok="handleOk">
    <template #title> 捐钱 </template>

    <a-form ref="formRef" :model="donateForm" layout="vertical">
      <a-form-item
        field="moneyUserName"
        :rules="[{ required: true, message: '请输入姓名' }]"
        :validate-trigger="['blur']"
        label="姓名"
      >
        <a-input v-model="donateForm.moneyUserName" placeholder="捐款人姓名">
        </a-input>
      </a-form-item>

      <a-form-item
        field="moneyRescueName"
        :rules="[{ required: true, message: '请输入接收站信息' }]"
        :validate-trigger="['blur']"
        label="接收站"
      >
        <a-input v-model="donateForm.moneyRescueName" placeholder="接收站">
        </a-input>
      </a-form-item>
      <a-form-item
        field="moneyIsAnonym"
        :rules="[{ required: true, message: '选择是否匿名' }]"
        :validate-trigger="['change']"
        label="是否匿名"
      >
        <a-radio-group v-modal="donateForm.moneyIsAnonym">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="moneyName"
        :rules="[{ required: true, message: '请输入捐款名称' }]"
        :validate-trigger="['blur']"
        label="名称"
      >
        <a-input v-model="donateForm.moneyName" placeholder="捐款名称">
        </a-input>
      </a-form-item>
      <a-form-item
        field="moneyPrice"
        :rules="[{ required: true, message: '请输入捐款金额' }]"
        :validate-trigger="['blur']"
        label="捐款金额"
      >
        <a-input-number v-model="donateForm.moneyPrice" placeholder="捐款金额">
        </a-input-number>
      </a-form-item>
      <a-form-item
        field="moneyPhone"
        :rules="[{ required: true, message: '请输入捐款电话' }]"
        :validate-trigger="['blur']"
        label="捐款电话"
      >
        <a-input v-model="donateForm.moneyPhone" placeholder="捐款电话">
        </a-input>
      </a-form-item>
      <a-form-item field="moneyMessage" label="捐款信息">
        <a-input v-model="donateForm.moneyMessage" placeholder="捐款信息">
        </a-input>
      </a-form-item>
      <a-form-item field="moneyTime" label="捐款时间">
        <a-date-picker v-model="donateForm.moneyTime" placeholder="捐款时间" />
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal
    v-model:visible="materialVisible"
    @cancel="handleMaterialCancel"
    @ok="handleMaterialOk"
  >
    <template #title> 捐物资 </template>

    <a-form ref="formRef" :model="materialForm" layout="vertical">
      <a-form-item
        field="materialUserName"
        :validate-trigger="['blur']"
        label="姓名"
      >
        <a-input
          v-model="materialForm.materialUserName"
          placeholder="捐款人姓名"
        >
        </a-input>
      </a-form-item>

      <a-form-item
        field="materialRescueName"
        :rules="[{ required: true, message: '请输入接收站信息' }]"
        :validate-trigger="['blur']"
        label="救护站"
      >
        <a-input v-model="materialForm.materialRescueName" placeholder="接收站">
        </a-input>
      </a-form-item>
      <a-form-item
        field="materialCourierNumber"
        :rules="[{ required: true, message: '请输入编号信息' }]"
        :validate-trigger="['blur']"
        label="编号"
      >
        <a-input
          v-model="materialForm.materialCourierNumber"
          placeholder="编号"
        >
        </a-input>
      </a-form-item>
      <a-form-item
        field="materialIsAnonym"
        :rules="[{ required: true, message: '选择是否匿名' }]"
        :validate-trigger="['change']"
        label="是否匿名"
      >
        <a-radio-group v-modal="materialForm.materialIsAnonym">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        field="materialName"
        :rules="[{ required: true, message: '请输入捐款物资名称' }]"
        :validate-trigger="['blur']"
        label="名称"
      >
        <a-input v-model="materialForm.materialName" placeholder="捐款名称">
        </a-input>
      </a-form-item>
      <a-form-item
        field="materialPhone"
        :rules="[{ required: true, message: '请输入捐款电话' }]"
        :validate-trigger="['blur']"
        label="捐款电话"
      >
        <a-input v-model="materialForm.materialPhone" placeholder="捐款电话">
        </a-input>
      </a-form-item>
      <a-form-item field="materialMessage" label="捐款信息">
        <a-input v-model="materialForm.materialMessage" placeholder="捐款信息">
        </a-input>
      </a-form-item>
      <a-form-item field="materialTime" label="捐款时间">
        <a-date-picker
          v-model="materialForm.materialTime"
          placeholder="捐款时间"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {
  getDonate,
  getDonateMaterial,
  createDonateMoney,
  createDonateMaterial
} from '@/api/donate';
import { onMounted, reactive, ref } from 'vue';
import moment from 'moment';

let donateForm = reactive({
  moneyUserName: '',
  moneyUserId: undefined,
  moneyPrice: 0,
  moneyPhone: '',
  moneyMessage: '',
  moneyRescueName: '',
  moneyName: '',
  moneyIsAnonym: '0',
  moneyTime: Date.now(),
});
const visible = ref(false);
const materialVisible = ref(false);
let materialForm = reactive({
  materialUserName: '',
  materialPrice: 0,
  materialCourierNumber: '',
  materialPhone: '',
  materialMessage: '',
  materialRescueName: '',
  materialName: '',
  materialIsAnonym: '0',
  materialTime: Date.now(),
});
const handleMaterialCancel = () => {
  materialVisible.value = false;
};

const handleMaterialOk = () => {
  try {
    createDonateMaterial(materialForm);
  } catch (error) {
    console.log(error);
  } finally {
    materialVisible.value = false;
    materialForm = null;
  }
}

const handleCancel = () => {
  visible.value = false;
};

const handleOk = () => {
  try {
    createDonateMoney(donateForm);
  } catch (error) {
    console.log(error);
  } finally {
    visible.value = false;
    donateForm = null;
  }
};

const columns = [
  {
    title: '捐款id',
    dataIndex: 'moneyId',
  },
  {
    title: '捐款人id',
    dataIndex: 'moneyUserId',
  },
  {
    title: '接收站',
    dataIndex: 'moneyRescueName',
  },
  {
    title: '捐款人',
    dataIndex: 'moneyUserName',
  },
  {
    title: '金额',
    dataIndex: 'moneyPrice',
  },
  {
    title: '电话',
    dataIndex: 'moneyPhone',
  },
  {
    title: '捐款信息',
    dataIndex: 'moneyMessage',
  },
  {
    title: '捐款时间',
    slotName: 'moneyTime',
  },
];

const data = ref([]);
const fetchData = async () => {
  const res = await getDonate();
  if (res.code === 200) {
    data.value = res.data;
  }
};
const materialData = ref([]);
const fetchMaterialData = async () => {
  const res = await getDonateMaterial();
  if (res.code === 200) {

    materialData.value = res.data.map(item=>{
      return {
        ...item, 
      }
    })
    console.log(materialData.value,12356);
    


  }
};

const materialColumns = [
  {
    title: '物资id',
    dataIndex: 'materialId',
  },
  {
    title: '物资捐款人id',
    dataIndex: 'materialUserId',
  },

  {
    title: '物资捐献人',
    dataIndex: 'materialUserName',
  },
  {
    title: '接收站',
    dataIndex: 'materialRescueName',
  },
  {
    title: '编号',
    dataIndex: 'materialCourierNumber',
  },
  {
    title: '物资名称',
    dataIndex: 'materialName',
  },
  {
    title: '电话',
    dataIndex: 'materialPhone',
  },
  {
    title: '捐款信息',
    dataIndex: 'materialMessage',
  },
  {
    title: '捐款时间',
    slotName: 'materialTime',
  },
];

onMounted(() => {
  fetchData();
  fetchMaterialData();
});
</script>

<style lang="less" scoped>
.container {
  background-color: var(--color-fill-2);
  padding: 16px 20px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .table {
    flex: 1;
  }
}
</style>
